<template>
  <div class='container'>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span style="font-size:12px;
        color:pink;
        ">说明:目前支持学科和关键字条件筛选</span>
        <el-button type="success"
        style="float: right;"
        @click="hJoinNew"
        >新增试题</el-button>
      </div>
      <div>
    </div>
    <el-row>
    <el-form :model="form" ref="form" label-width="80px">
    <el-col :span="6">
    <div class="grid-content bg-purple">
        <el-form-item label="学科" prop="subjectID">
          <!-- 学科下拉框 -->
          <!-- 添加改变事件 -->
          <el-select  placeholder="请选择" v-model="theCan.Subjects"
            @change="hDirectory">
            <!-- 学科改变事件要写在下拉框里 -->
            <el-option
            v-for="(item, index) in form.SubjectIDALL"
            :key="index"
            :value="item.id"
            :label="item.subjectName"
            ></el-option>
            </el-select>
    </el-form-item>
   <!-- 试题类型下拉框 -->
  <el-form-item label="试题类型" prop="quesID">
      <el-select  placeholder="请选择" v-model="form.quesID">
      <el-option label="单选" value="1" ></el-option>
      <el-option label="多选" value="2"></el-option>
      <el-option label="简答" value="3"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="题目备注" prop="noteID">
    <el-input style="width:220px" v-model="form.noteID"></el-input>
  </el-form-item>
    </div></el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple-light">
      <el-form-item label="二级目录" prop="tagId">
        <el-select  placeholder="请选择" v-model="form.tagId" @change="hTagsList">
          <el-option
          v-for="(item, index) in simpleList"
          :key="index"
          :value="item.value"
          :label="item.label"
          ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="难度" prop="difficultyID">
          <el-select  placeholder="请选择" v-model="form.difficultyID">
        <el-option
      v-for="(item, index) in difficultyList"
      :key="index" :label="item.label" :value="item"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="企业简称" prop="companysID">
    <el-input style="width:220px" v-model="form.companysID"></el-input>
  </el-form-item>
    </div>
    </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple">
      <el-form-item label="标签" prop="labelID">
      <el-select  placeholder="请选择" v-model="form.labelID">
          <el-option
          v-for="(item, index) in tagsListList"
          :key="index"
          :value="item.value"
          :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="directionID">
        <el-select  placeholder="请选择" v-model="form.directionID">
          <el-option
          v-for="(item, index) in directionList"
          :key="index"
          :value="item"
          :label="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市">
        <MyCity v-model="form.provAndCity"/>
      </el-form-item>
     </div>
     </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
        <el-form-item label="关键字" prop="keywordID">
          <el-input style="width:220px" v-model="theCan.Keywords"></el-input>
            </el-form-item>
        <el-form-item label="录入人" prop="enterID">
          <el-select  placeholder="请选择" v-model="form.enterID">
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="超级管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
        <div style="flot:right">
          <el-button @click="hRemoveAll">清除</el-button>
          <el-button type="primary" @click="hSearch">搜索</el-button>
        </div>
        </div>
        </el-col>
    </el-form>
</el-row>
<el-row>
  <el-col :span="24"><div class="el-alert__title">
    数据一共 {{total}} 条</div></el-col>
</el-row>
 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        width="160">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="120">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="150">
        <template slot-scope="scope">
          <!-- 通过v-if来判断实体类型 -->
          <el-tag v-if="scope.row.difficulty==1" type="info">单选</el-tag>
          <el-tag v-else-if="scope.row.difficulty==2" type="success">多选</el-tag>
          <el-tag v-else-if="scope.row.difficulty==3">简单</el-tag>
          <el-tag v-else type="danger">unknow</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        width="150">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="180">
        <template slot-scope="scope">
          <span>{{scope.row.chkDate | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
        </template>
      </el-table-column>
      <!-- 难度 -->
      <el-table-column
        prop="difficulty"
        label="难度"
        width="110">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.difficulty==1" type="info">简单</el-tag>
          <el-tag v-else-if="scope.row.difficulty==2" type="success">一般</el-tag>
          <el-tag v-else-if="scope.row.difficulty==3">困难</el-tag>
          <el-tag v-else type="danger">unknow</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="140">
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        prop="name"
        label="操作"
        width="180">
          <template slot-scope="scope">
          <!-- 预览按钮 -->
          <el-button icon="el-icon-search" title="预览"
          circle class="el-button--small" @click="hPreview(scope.row.id)">
          </el-button>
          <!-- 编辑按钮 -->
          <el-button type="primary"
          icon="el-icon-edit" title="修改"
          circle class="el-button--small" @click="hEdit(scope.row.id)"></el-button>
          <!-- 删除按钮 -->
          <el-button type="danger"
          icon="el-icon-delete" title="删除"
          circle class="el-button--small" @click="hDelete(scope.row.id)"></el-button>
          <!-- 加入精选按钮 -->
          <el-button type="success"
          icon="el-icon-check" title="加入精选"
          circle class="el-button--small" @click="hJoinFine(scope.row.id)"></el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination
            background
            @size-change="hSizeChange"
            @current-change="hCurrentChange"
            :current-page="Number(theCan.page)"
            :page-size="Number(theCan.pagesize)"
            :total="Number(total)"
            layout="sizes, prev, pager, next, jumper"
            :page-sizes="[2,5,10,20,30]"
            >
          </el-pagination>
        </div>
      </div>
</el-card>
<!-- 预览组件 -->
    <el-dialog
      :modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】：
            <span v-if="preview_obj.questionType === '1'">单选</span>
            <span v-else-if="preview_obj.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【编号】：{{ preview_obj.id }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【难度】：
            <span v-if="preview_obj.difficulty === '1'">简单</span>
            <span v-else-if="preview_obj.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【标签】：{{ preview_obj.tags }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【学科】：{{ preview_obj.subjectName }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【目录】：{{ preview_obj.directoryName }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【方向】：{{ preview_obj.direction }}
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="24"><div class="grid-content bg-purple">【题干】：</div></el-col>
        <el-col :span="24"><div class="grid-content bg-purple" style="color: blue">
            {{ preview_obj.question }}
          </div></el-col>
        <el-col :span="24"><div class="grid-content bg-purple">
            <span v-if="preview_obj.questionType === '1'">单选题 选项: (一下选中的选项为正确答案)</span>
            <span v-else-if="preview_obj.questionType === '2'">多选题 选项: (一下选中的选项为正确答案)</span>
            <span v-else>简答题 选项: (一下选中的选项为正确答案)</span>
          </div>
        </el-col>
        <el-col
          v-for="(itim, index) in preview_obj.options"
          :key="index"
          :span="24"
         >
          <div class="grid-content bg-purple">
            <el-radio
              v-if="preview_obj.questionType !== '3'"
              v-model="radio"
              :label="itim.isRight"
              :disabled="radio !== itim.isRight">
              {{ itim.title }}
            </el-radio>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="3.5"><div class="grid-content bg-purple">【参考答案】：</div></el-col>
        <el-col :span="18">
          <div
            @click="myswitch(preview_obj)"
            class="grid-content bg-purple"
            style="color: blue">
            <el-button type="danger">视频答案预览</el-button>
          </div>
        </el-col>
        <div v-if="hideen">
          <video
            class="videos"
            controls
            autoplay
            preload="auto"
            :src="video_id === preview_obj.id ? srcUrl : ''"></video>
        </div>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col>【答案解析】：<span v-html="preview_obj.answer"></span></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col
          >【题目备注】：<span v-html="preview_obj.remarks"></span
        ></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import { simple as directorysList } from '@/api/hmmm/directorys'
import { list as questions, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { simple as tagsList } from '@/api/hmmm/tags'
import { direction, difficulty, questionType } from '@/api/hmmm/constants.js'
import MyCity from './citys'
export default {
  components: {
    MyCity // 封装省市的组件
  },
  data () {
    return {
      // 预览弹层
      dialogVisible: false,
      // 预览的单选框
      radio: 1,
      // 预览的对象
      preview_obj: {},
      // 预览的视频显示与隐藏
      hideen: false,
      total: null, // 列表数据的总条目数
      theCan: {
        page: 1, // 页面是第几页
        pagesize: 10, // 单个页面的数据数量
        Keywords: null, // 关键字
        Subjects: null
      },
      // Keywords: '',
      // Subjects: '',
      form: { // 一个装着数据项的对象,可以在项目中调用
        subjectID: null, // 二级目录的id值
        SubjectIDALL: [], // 请求过来学科的数组
        quesID: '', // 试题类型的prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
        noteID: '', // 题目备注的prop
        tagId: '', // 标签的prop
        difficulty: '', // 难度
        tags: '', // 标签的prop
        provAndCity: {
          province: '',
          city: ''
        },
        directionID: '', // 方向的prop
        difficultyID: '', // 难度的prop
        keywordID: '', // 关键字的prop
        enterID: '' // 录入人
      },
      isShowDialog: false, // 控制展示预览弹层的布尔值变量
      tableData: [],
      curQuestionId: '',
      simpleList: [], // 二级目录的数据
      tagsListList: [], // 标签的数据数组
      directionList: [], // 方向的数据数组
      difficultyList: [],
      questionTypeList: [],
      choiceState: 0,
      hSearchObj: {}
    }
  },
  // 创建完毕状态
  created () {
    this.getSubject() // 获取学科数据
    this.getQuestion() // 获取列表数据
    this.hDirection()
  },
  methods: {
    // 条件查询
    // buildParamsSearch () {
    //   const hSearchObj = {}
    //   // 如果某一个参数是null,则axios就不会发这个参数
    //   // 如果某一个参数是""，axios是会发出这个参数
    //   hSearchObj.keyword = this.form.keyword
    //   return hSearchObj
    // },
    hSearch () { // 条件查询(搜索)
      this.form.page = 1 // 重新返回到第一页
      this.theCan.keyword = this.theCan.Keywords
      this.theCan.subjectID = this.theCan.Subjects
      this.getQuestion()
    },
    // 清除数据(重置表单)
    hRemoveAll () {
      this.$refs.form.resetFields()
      this.theCan.Subjects = null // 学科数据清空
      this.theCan.Keywords = null // 关键字数据清空
      this.simpleList = [] // 二级目录数据存放的数组清空
      this.tagsListList = [] // 标签数据的清空
    },
    // 进入新增试题页面
    hJoinNew () {
      this.$router.push('new') // 跳转到路由
    },
    // 关闭弹层
    changeShow () {
      this.$confirm('确定要关闭该弹层吗?', '提示', { // 提示信息
        type: 'warning' // 提示信息的样式
      }).then(() => {
        this.isShowDialog = false
        this.$message({
          type: 'success',
          message: '关闭成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除操作'
        })
      })
    },
    async hDirection () {
      this.directionList = direction // 请求方向数据
      this.difficultyList = difficulty // 请求难度数据
      this.questionTypeList = questionType // 请求问题类型数据
    },
    // 标签数据
    async hTagsList (id) {
      const res = await tagsList({ tagId: id })
      this.tagsListList = res.data
    },
    // 点击加入精选
    hJoinFine (id) {
      this.$confirm('此操作会加入精选题库,是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        this.doJoinFine(id) // 括号里的值是要传值
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    // 加入精选实现
    doJoinFine (id) { // 括号里的值是要接收的值
      try {
        choiceAdd({ id, choiceState: 1 })
        this.$message.success('成功加入精选!')
        this.getQuestion() // 再次渲染页面
      } catch (err) {
        this.$message.error('加入失败!')
      }
    },
    // 二级目录数据
    async hDirectory (id) {
      const res = await directorysList({ subjectID: id })
      this.simpleList = res.data
    },
    // 页码数据
    // buildParams () {
    //   const paramsObj = {}
    //   const { page, pagesize } = this.form
    //   // 如果某一个参数是null,则axios就不会发这个参数
    //   // 如果某一个参数是""，axios是会发出这个参数
    //   paramsObj.page = page || null
    //   paramsObj.pagesize = pagesize || null
    //   return paramsObj
    // },
    // 预览函数
    async previewfn (ind) {
      // 预览弹层的控制和显示
      this.dialogVisible = true
      const { data: res } = await detail({ id: ind.id })
      res.ifPlay = false
      this.preview_obj = res
    },
    // 预览页面
    hPreview (id) {
      this.curQuestionId = id
      this.isShowDialog = true
      console.log(id)
    },
    // 预览弹层关闭
    async handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          // 预览弹层
          this.dialogVisible = false
          // 关闭视频显示
          this.hideen = false
          // 暂停视频
          const myvdo = document.querySelector('.videos')
          myvdo.pause()
          done()
        })
        .catch((_) => {})
    },
    // 预览里视频的显示与隐藏
    myswitch (data) {
      this.srcUrl = data.videoURL
      this.video_id = data.id
      console.log(this.video_id)
      console.log(this.srcUrl)
      this.hideen = true
    },
    // 点击当前页面更改
    hCurrentChange (curPage) {
      this.theCan.page = curPage
      console.log(this.theCan.page)
      // console.log('1')
      this.getQuestion()
    },
    // 点击改变页面的显示条数
    hSizeChange (val) {
      this.theCan.pagesize = val
      this.getQuestion()
    },
    async getSubject () { // 学科数据请求
      const { data: res } = await list() // 获取学科的数据
      this.form.SubjectIDALL = res.items // 学科的数据放到这个数组里
    },
    async getQuestion () { // 基础题库列表数据请求
      const { data: res } = await questions(this.theCan)
      this.tableData = res.items
      this.total = res.counts
    },
    // 跳转到编辑
    hEdit (id) {
      this.$router.push('new?id=' + id)
    },
    // 删除功能
    async doDelete (id) {
      try {
        await remove({ id })
        this.$message.success('成功删除了该行!')
        this.getQuestion()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    // 删除提示
    hDelete (userId) {
      this.$confirm('此操作会永久删除该行数据,是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        this.doDelete(userId)
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    }
  }
}
</script>

<style scoped lang='css'>
.el-alert__title{
  color: gray;
  font-size: 13px;
  line-height: 35px;
  background-color: rgb(244, 244, 245);
}
</style>
